<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="../../favicon.ico" rel="shortcut icon" />
<link href="../../base.css" rel="stylesheet" type="text/css" media="screen" />
<script src="../../jquery/jquery.js" type="text/javascript"></script>
<script src="../../ux/jquery.ux.js" type="text/javascript"></script>
<script src="../../ux.blackbox/jquery.ux.blackbox.js" type="text/javascript"></script>
<title>jquery.ux.blackbox</title>
</head><body>

<a href="./">&laquo; Index</a>

<style type="text/css">
.ux-blackbox-box {	
	color: #FFF;
	}
.prev, .next {
	position: absolute;
	line-height: 400px;
	margin-top: -200px;
	font-size: 48px;
	cursor: pointer;
	height: 400px;
	width: 200px;
	top: 50%;
	filter: alpha(opacity=15);
	-moz-opacity: 0.15;
	opacity: 0.15;
	}	
.prev { 
	left: -50px; 
	text-align: left;
	}
.next { 
	right: -50px; 
	text-align: right;
	}
.prev:hover, .next:hover {
	filter: alpha(opacity=100);
	-moz-opacity: 1;
	opacity: 1;
	}
</style>

<script type="text/javascript">
jQuery(function($){
	
	// add overlay functionality to each image link
	var $images = $('a.img').blackbox({
		// the main content creator
		html: function( $box ){
			// active element, to use in closures
			var elem = this,
			// create a new image object
			image = new Image(),
			// create some navigation controls 
			$arrows = $( prev + next ).bind("click",function( ev ){
				// determine current position
				var index = $images.index( elem );
				// determine prev or next click
				index = $( ev.target ).is(".prev") ? 
					// prev or last
					( index-1 < 0 ? $images.length-1 : index-1 ) : 
					// next or first
					( index+1 == $images.length ? 0 : index+1 ); 
				// hide the current overlay
				$( elem ).ux("blackbox.hide");
				// show the prev/next overlay  
				$images.eq( index ).ux("blackbox.show");
				});
			// handle adding the image when loaded
			image.onload = function(){ 
				// replace box content w/ image & arrows
				$box.html("").append( $arrows ).append( image );
				// resize & align box overlay
				$( elem ).ux("blackbox.size"); 
				}; 
			// set temporary message
			$box.html("Loading...");
			// begin loading
			image.src = this.href;
			},
		// overlay bg attributes
		background: "black",
		opacity: .85
		}),
	// the html to create the prev/next links	
	prev = '<div class="prev">&lang;</div>',
	next = '<div class="next">&rang;</div>';
	
	});
</script>

<h2>ux.blackbox / gallery</h2>
<ul>
	<li><a href="img/hs200221a.jpg" class="img">hs200221a</a></li>
	<li><a href="img/hs200310b.jpg" class="img">hs200310b</a></li>
	<li><a href="img/hs200310i.jpg" class="img">hs200310i</a></li>
	<li><a href="img/hs200719j.jpg" class="img">hs200719j</a></li>
	<li><a href="img/hs200736a.jpg" class="img">hs200736a</a></li>
	<li><a href="img/hs200839b.jpg" class="img">hs200839b</a></li>
	<li><a href="img/hs200905a.jpg" class="img">hs200905a</a></li>
	</ul>
</body></html>